<template>
  <in-work-cell class="box-item" :modal="modal">
    <template slot="link">
      <m-button :type="map[modal.status].type" size="sm" plain>{{ map[modal.status].statusTxt }}</m-button>
    </template>
    <view class="container">
      <view class="row">
        <view class="item">
          <text class="title">租户</text>
          <text>{{ enterList.map[modal.tenantId] }}</text>
        </view>
        <view class="item">
          <text class="title">入库类型</text>
          <text>{{ dictMap.map[modal.sourceType] }}</text>
        </view>
        <view class="item">
          <text class="title">操作员</text>
          <text> {{ userList.map[modal.operName] }} </text>
        </view>
        <view class="item">
          <text class="title">审核人</text>
          <text> {{ userList.map[modal.auditName] }} </text>
        </view>
      </view>
      <view class="row" v-if="modal.summary">
        <view class="item">
          <text class="title">说明</text>
          <text>{{ modal.summary }}</text>
        </view>
      </view>
    </view>
    <view class="footer">
      <m-button size="md" :type="getStatusTxt.type" shape="round" @click="handleClickGoDetail">
        {{ getStatusTxt.buttonTxt }}
      </m-button>
      <text>创建时间：{{ modal.createTime }}</text>
    </view>
  </in-work-cell>
</template>

<script>
import { router } from '@/router'
import { map } from '@/utils/constant'
import { mapState } from 'vuex'
import { getWorkOrder } from '@/api/modules/in-work'

export default {
  props: {
    dictMap: {
      type: Object,
      default: () => ({}),
    },
    modal: {
      type: Object,
      default: () => ({}),
    },
    api: {
      type: String,
      default: 'default',
    },
  },
  computed: {
    ...mapState({
      enterList: (state) => state.cache.enterList,
      userList: (state) => state.cache.userList,
    }),
    getStatusTxt() {
      return map[this.modal.status][this.modal.pickStatus] || {}
    },
  },
  data() {
    return {
      map,
    }
  },
  methods: {
    async handleClickGoDetail() {
      const { status, pickStatus, inOrderId } = this.modal
      const bool = status === 1 && pickStatus === 2 //待入库，拣货完成
      if (bool) {
        const { data } = await getWorkOrder(inOrderId)
        this.$store.commit('inWork/setInfo', data)
      }

      router.push({
        name: bool ? 'StartIn' : 'InWorkDetail',
        params: {
          inOrderId,
          type: 'systemInWork',
          api: this.api,
          status: 2,
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.box-item {
  .container {
    margin: 0 20rpx;
    background-color: #f5fbfd;
    .row {
      display: flex;
      justify-content: space-around;
      padding: 25rpx 0;
      .item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        text-align: center;
        font-size: 32rpx;
        .title {
          color: #637687;
          font-size: 26rpx;
          margin-bottom: 20rpx;
        }
      }
    }
  }

  .footer {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 26rpx;
    margin: 20rpx 50rpx;
    padding-bottom: 20rpx;
    text {
      display: block;
      margin-top: 20rpx;
      color: #b7c2cc;
      font-size: 24rpx;
    }
  }
}
</style>
